<template>
    <div>
      <h2>实时数据</h2>
      <div id="nowEcharts"> </div>
  </div>
  </template>
  <script setup lang = "ts">
  import * as echarts from 'echarts';
  import { ref, onMounted } from 'vue';
  
  const chart = ref<echarts.ECharts | null>(null);
  onMounted(() => {
      const chartContainer = document.getElementById('nowEcharts');
    if (chartContainer) {
      chart.value = echarts.init(chartContainer);
  
      const options = {
        xAxis: {
          data: ['2019', '2020', '2021', '2022', '2023']
        },
        yAxis: {},
        series: [
          {
            data: [1000, 2200, 2800, 4300, 4900],
            type: 'line',
            stack: 'x'
          },
          {
            data: [5000, 4000, 3000, 5000, 1000],
            type: 'line',
            stack: 'x'
          }
        ]
      };
  
      if (chart.value) {
        chart.value.setOption(options);
      }
    }
  });
  
  </script>
  <style lang= "scss" scoped>
  #nowEcharts {
    width: 100%;
    height: 400px;
  }
  </style>